<template>
    <div>
        <div class="addCategory">
            <el-input
                    clearable
                    size="small"
                    prefix-icon="el-icon-plus"
                    placeholder="请输入分类显示名称"
                    v-model="addCategory.cateName">
            </el-input>
            <el-input
                    clearable
                    size="small"
                    prefix-icon="el-icon-plus"
                    placeholder="请输入分类名称"
                    v-model="addCategory.name">
            </el-input>
            <el-input
                    clearable
                    size="small"
                    placeholder="请输入分类路径"
                    v-model="addCategory.path">
                <template slot="prepend">/</template>
            </el-input>
            <el-button size="small" type="primary" @click="toAdd()">添加</el-button>
        </div>
        <div style="width: 80%">
            <el-table
                    :data="categoriesPage"
                    border
                    stripe>
                <el-table-column
                        prop="id"
                        label="id"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="cateName"
                        label="显示名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        width="120"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="path"
                        width="120"
                        label="路径">
                </el-table-column>
                <el-table-column
                        prop="date"
                        width="180"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="priority"
                        width="80"
                        label="优先级">
                </el-table-column>
                <el-table-column
                        width="80"
                        label="是否启用">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isUse"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0"
                                @change="changeIsUse($event,scope.row.id)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="200">
                    <template slot-scope="scope" v-if="scope.row.name != 'home'">
                        <el-button @click="toEditView(scope.row)" size="mini" disabled>编辑</el-button>
                        <el-button  size="mini" type="danger" @click="toDelete(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
                style="margin-top: 10px"
                small
                :current-page="currentPage"
                @current-change="currentChange"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>

        <el-dialog
                title="编辑分类"
                :visible.sync="dialogVisible"
                width="30%"
               >
            <el-form ref="editForm" :model="editCategory" label-width="120px">
                <el-form-item label="分类显示名称">
                    <el-input v-model="editCategory.cateName"></el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input v-model="editCategory.name"></el-input>
                </el-form-item>
                <el-form-item label="分类路径">
                    <el-input v-model="editCategory.path"></el-input>
                </el-form-item>
                <el-form-item label="分类等级">
                    <el-input v-model="editCategory.priority"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
             </span>
        </el-dialog>
    </div>
</template>

<script>
    import {deleteRequest, getRequest, postRequest, putRequest} from "../../../utils/api";

    export default {
        name: "category",
        data(){
            return{
                dialogVisible :false,
                editCategory:{
                    cateName : null,
                    name : null,
                    path:null,
                    id: '',
                    priority : ''
                },
                addCategory:{
                  cateName : null,
                    name : null,
                    path:null
                },
                total : 1,
                currentPage : 1,
                pageSize : 5,
                categories:[],
                categoriesPage:[],
            }
        },
        methods:{
            changeIsUse(e,id){
                putRequest('/admin/category/?id=' + id + '&isUse=' + e).then(resp => {
                    if(resp){
                        this.init();
                    }
                })
              console.log(e,id)
            },
            toDelete(row){
                this.$confirm('此操作将永久删除' + row.cateName + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除
                    deleteRequest('/admin/category/?id=' + row.id).then(resp =>{
                        if(resp){
                            this.init()
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            initAdd(){
                this.addCategory = {
                    cateName : null,
                        name : null,
                        path:null
                }
            },
            toAdd(){
              if(this.addCategory.cateName == null || this.addCategory.name== null || this.addCategory.path== null){
                  this.$message.error("请输入所有字段！");
              }
              //验证通过
              //判断path前缀，没有则添加
                if(!this.addCategory.path.startsWith("/")){
                    this.addCategory.path = '/' + this.addCategory.path;
                }
                //添加
                postRequest('/admin/category/add',this.addCategory).then(resp => {
                    if(resp){
                        this.initAdd();
                        this.init();
                    }
                })
            },
            init(){
                this.currentPage = 1;
                getRequest('/admin/category/').then(resp => {
                    if(resp){
                        this.categories = resp;
                        this.categoriesPage = resp.slice(0,this.pageSize);
                        this.total = resp.length;
                    }
                })
            },
            toEditView(row){
                this.dialogVisible = true;
                this.editCategory = row;
                console.log(row)
            },
            currentChange(page){
                this.currentPage = page;
                this.categoriesPage = this.categories.slice((this.currentPage-1) * this.pageSize,(this.currentPage*this.pageSize));
            }

        },
        mounted() {
            this.init();
            this.initAdd();
        }
    }
</script>

<style>
    .el-table__header-wrapper{
        width: auto;
    }
    .addCategory{
        width: auto;
        margin-bottom: 5px;
    }
.addCategory .el-input{
    margin-right: 5px;
    width: 200px;
}
</style>